<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="GridView Column Drag and Drop" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h3>Supplier Information</h3>
    <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID"
        ColumnDragStartEvent="onColumnDragStart" ColumnsLoadedFromProfileEvent="onColumnsLoaded" ColumnDroppedEvent="onColumnDropped">
       <AlternatingRowStyle CssClass="AlternatingRowStyle" />
       <RowStyle CssClass="RowStyle"/>
       <HeaderStyle CssClass="HeaderStyle"/>
       <Columns>
        <AjaxData:GridViewBoundColumn HeaderText="Company" DataField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" AllowDragAndDrop="true"/>
        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" AllowDragAndDrop="true"/>
        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" AllowDragAndDrop="true"/>
       </Columns>
    </AjaxData:GridView>
    <br />
    <div id="divEvents" class="trace"></div>
    <script type="text/javascript">

        var _gridView;

        function pageLoad(sender, e)
        {
            _gridView = GridView1;
            loadSuppliers();
            //_gridView.loadColumnsFromProfile('DndColumns');
        }

        function onColumnsLoaded(sender, e)
        {
            loadSuppliers();
        }

        function loadSuppliers()
        {
            DataService.GetAllSupplier(onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _gridView.set_dataSource(result);
            _gridView.dataBind();
        }

        function onColumnDragStart(sender, e)
        {
            var column = e.get_column();

            writeMessage(String.format('{0} Column Drag Started<br/>', column.get_headerText()));
        }

        function onColumnDropped(sender, e)
        {
            var column = e.get_column();

            writeMessage(String.format('{0} Column Dropped in index {1} from index {2}<br/>', column.get_headerText(), e.get_newIndex(), e.get_oldIndex()));
            //_gridView.saveColumnsToProfile('DndColumns');
        }

        function writeMessage(message)
        {
            $get('divEvents').innerHTML += message;
        }

    </script>

</asp:Content>